<!-- 自定义页面 -->
<template>
    <view>
        <!-- 包装元素不被渲染 -->
        <block v-for="(item,index) in pageData" :key="index">
            <navBar v-if="item.type == 'header' && (item.compCont.style == 1 || (item.compCont.style == 2 && isShow))" :isBack="fromShare == 0 ? true : false"
                :title="item.compCont.title" :bgColor="item.compCont.bgColor" :color="item.compCont.color" :searchShow="item.compCont.search"></navBar>

            <!-- 搜索图标-顶部导航配置 -->
            <view class="search flexac" :style="{'background-color':item.compCont.searchBgColor, top}"
                @click="$pop.toSearch" v-if="item.type == 'header' && item.compCont.search">
                <view class="iconfont icon-sousuokuang1 size28 white"></view>
            </view>

            <Bannel v-if="item.type == 'banner'" :pageData="item.compCont" :isImmerse="pageData[0].compCont.style"></Bannel>
            <tabItem v-if="item.type == 'nav'" :pageData="item.compCont"></tabItem>
            <searchBor v-if="item.type == 'search'" :pageData="item.compCont"></searchBor>
            <coupon v-if="item.type == 'coupon'" :pageData="item.compCont"></coupon>
            <notice v-if="item.type == 'notice'" :pageData="item.compCont"></notice>
            <VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
            <product v-if="item.type == 'goodsDisplay'" :pageData="item.compCont"></product>
            <adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
            <tabs v-if="item.type == 'goodsGroup'" :pageData="item.compCont" ref="tabs"></tabs>
            <ArticleList v-if="item.type == 'article'" :pageData="item.compCont" ref="article"></ArticleList>
            <divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
            <fromList v-if="item.type == 'form'" :pageData="item.compCont"></fromList>
            <textTitle v-if="item.type == 'text'" :pageData="item.compCont"></textTitle>
            <parseContent v-if="item.type == 'richText'" :pageData="item.compCont"></parseContent>
            <hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
            <seckill v-if="item.type == 'seckill'" :pageData="item.compCont"></seckill>
			<groupBuy v-if="item.type == 'groupBuy'" :pageData="item.compCont"></groupBuy>
            <practice v-if="item.type == 'answer'" :pageData="item.compCont"></practice>
			<courseList v-if="item.type == 'study'" :pageData="item.compCont"></courseList>
            <bargain v-if="item.type == 'bargain'" :pageData="item.compCont"></bargain>
            <store v-if="item.type == 'store'" :pageData="item.compCont" ref="store"></store>
            <storeGroup v-if="item.type == 'storeGroup'" :pageData="item.compCont" ref="storeGroup"></storeGroup>
        </block>

        <contact :bgColor="prevColor" v-if="pageData"></contact>
        <!-- <tabBar :tab="isTab ? 16 : ''" v-if="isTab == 1"></tabBar> -->

        <!-- 授权登录 -->
        <showModel @cancelFunc='setHome({showMode:false})' v-if='showMode' type='2'></showModel>

        <!-- 分享海报 -->
        <SharePoster v-if='showShareQr' myid=' ' type='1' :pageType='"24&id="+id' @closePoster='setHomeShare({showShareQr:false})'></SharePoster>

        <!-- 打开客服 -->
        <showKefu v-if="showKefu" @cancelFunc="setHomeKefu({showKefu:false})" @openModal="setHome({showMode:true})"></showKefu>
    </view>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
import SharePoster from '@/components/sharePoster.vue'
import showKefu from '@/components/showKefu.vue'

// diy组件
import Bannel from '@/components/home/Bannel.vue'
import tabItem from '@/components/home/tabItem.vue'
import searchBor from '@/components/home/searchBor.vue'
import coupon from '@/components/home/coupon.vue'
import notice from '@/components/home/notice.vue'
import VideoList from '@/components/home/VideoList.vue'
import product from '@/components/home/product.vue'
import adv from '@/components/home/adv.vue'
import tabs from '@/components/home/tabs.vue'
import ArticleList from '@/components/home/ArticleList.vue'
import divider from '@/components/home/divider.vue'
import fromList from '@/components/home/fromList.vue'
import textTitle from '@/components/home/textTitle.vue'
import parseContent from '@/components/home/parseContent.vue'
import hotZone from '@/components/home/hotZone.vue'
import seckill from '@/components/home/seckill.vue'
import groupBuy from '@/components/home/groupBuy.vue'
import practice from '@/components/home/practice.vue'
import courseList from '@/components/home/courseList.vue'
import bargain from '@/components/home/bargain.vue'
import store from '@/components/home/store.vue'
import storeGroup from '@/components/home/storeGroup.vue'
export default {
    data() {
        return {
            pageData: '',
            isShow: false,
            fromShare: 0,
            id: 0, 
            isTab: 0,
            prevColor: ''
        }
    },
    computed: {
        ...mapState(['System', 'navHeight','showMode','showShareQr','showKefu','share','vid','position']),
        top() { // 搜索图标fixed定位top值
            return this.System.statusBarHeight + this.navHeight / 2 + 'px'
        }
    },
    components: {
        SharePoster,
        showKefu,
        Bannel,
        tabItem,
        searchBor,
        coupon,
        notice,
        VideoList,
        product,
        adv,
        tabs,
        ArticleList,
        divider,
        fromList,
        textTitle,
        parseContent,
        hotZone,
        seckill,
		groupBuy,
        practice,
		courseList,
        bargain,
        store,
        storeGroup
    },
    onLoad(e){
        if(e.fromShare) this.fromShare = e.fromShare
        if(e.id) this.id = e.id
        if(e.isTab) this.isTab = e.isTab
        this.diyget()
    },
    onShow(){
        // 子组件监听页面onShow
        if(this.$refs.article){ // 文章列表
            this.$refs.article.forEach(obj=>{
                obj.getBlockInfo()
            })
        }
        if(this.$refs.tabs){ // 商品分组-样式三
            this.$refs.tabs.forEach(obj=>{
                if(obj.pageData.style == 3){
                    obj.getBlockInfo()
                }
            })
        }
    },
    methods: {
        ...mapMutations(['setHome','setHomeShare','setHomeKefu']),
        diyget(){
            this.$http.get({
                url: '/newdiy/api/v1/diy/getDiyPage',
                data: {
                    front: 1,
                    id: this.id
                }
            }).then(res=>{
                if(res.status != 200) return this.$Toast(res.msg)
                const result = res.data.front_value || []
                let locate = false
                result.forEach(item => {
					if (item.type == 'store' || item.type == 'storeGroup') locate = true
				})
                this.pageData = result
                if(result.length > 1) this.prevColor = result[result.length - 1].compCont.bgColor
                if(locate && this.position.longitude == 0){
                    setTimeout(()=>{
						this.handleLocate()
					},1000)
                }
            })
        },
        async handleLocate() {
            await this.$pop.getLocation()
            if(this.position.longitude){
                if(this.$refs.store){ // 门店
                    this.$refs.store.forEach(obj=>{
                        obj.getBlockInfo()
                    })
                }
                if(this.$refs.storeGroup){ // 门店分组
                    this.$refs.storeGroup.forEach(obj=>{
                        obj.getBlockInfo()
                    })
                }
            }
        }
    },
    onShareAppMessage() {
        return {
            title: this.share.title,
            desc: this.share.desc,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=24&id=${this.id}`,
            imageUrl: this.share.imageUrl
        }
    },
    onPageScroll(e) {
        if (e.scrollTop > 100) {
            this.isShow = true
        } else {
            this.isShow = false
        }
    }
}
</script>

<style lang="scss" scoped>
.search {
    width: 66rpx;
    height: 66rpx;
    border-radius: 50%;
    position: fixed;
    margin-top: -33rpx;
    left: 24rpx;
    z-index: 2000;
}
/deep/ .myCut .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFA35E);
}
</style>